<template>
    <div class="PlotPoints">
        <div class="btn">
            <el-button @click="Drawer" @movingEvt="movingEvt">{{
                drawing ? "停止" : "画点"
                }}</el-button>
        </div>
        <div ref="tooltip" class="twipsy">
            <i>左键添加标记，右键停止</i>
        </div>
    </div>
</template>

<script>
    export default {
        name: "PlotPoints",
        //import引入的组件需要注入到对象中才能使用",
        components: {},
        data() {
            //这里存放数据",
            return {
                drawing: false
            };
        },
        //监听属性 类似于data概念",
        computed: {},
        //监控data中的数据变化",
        watch: {},
        //方法集合",
        methods: {
            Drawer() {
                const _this = this;
                let tooltip = this.$refs.tooltip;
                this.drawing = !this.drawing;
                let viewer = window.viewer;
                let scene = viewer.scene;
                if (!scene.pickPositionSupported) {
                    window.alert("This browser does not support pickPosition.");
                }
                if (this.drawing) {
                    document.body.style.cursor = "crosshair"; //鼠标十字型
                    let mousePosition = this.getMousePos(); //获取鼠标位置
                    // let mousePosition= new Cesium.Cartesian2(obj.x, obj.y);
                    let position = _this.initPosition(mousePosition); //鼠标位置转Cesium定位
                    let floatPoint = this.createPoint(position, true); //添加一个图标用来跟随鼠标
                    tooltip.style.display = "block"; //tooltip提示框显示
                    tooltip.style.left = mousePosition.x + 40 + "px"; //tooltip提示框定位
                    tooltip.style.top = mousePosition.y + 10 + "px"; //tooltip提示框定位
                    // 鼠标移动监听时间
                    viewer.screenSpaceEventHandler.setInputAction(function(movement) {
                        let movePosition = _this.initPosition(movement.endPosition);
                        floatPoint.position.setValue(movePosition);
                        tooltip.style.left = movement.endPosition.x + 40 + "px";
                        tooltip.style.top = movement.endPosition.y + 10 + "px";
                        _this.$emit("movingEvt", movement);
                    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

                    viewer.screenSpaceEventHandler.setInputAction(function(movement) {
                        let clickPosition = _this.initPosition(movement.position);
                        _this.createPoint(clickPosition);
                    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
                } else {
                    tooltip.style.display = "none";
                    document.body.style.cursor = "default";
                    viewer.entities.removeById("_floatPoint");
                    // console.log(viewer.entities);
                    viewer.screenSpaceEventHandler.removeInputAction(
                        Cesium.ScreenSpaceEventType.LEFT_CLICK
                    ); //移除事件
                    viewer.screenSpaceEventHandler.removeInputAction(
                        Cesium.ScreenSpaceEventType.MOUSE_MOVE
                    ); //移除事件
                }
                viewer.screenSpaceEventHandler.setInputAction(function() {
                    _this.drawing = false;
                    tooltip.style.display = "none";
                    document.body.style.cursor = "default";
                    viewer.entities.removeById("_floatPoint");
                    viewer.screenSpaceEventHandler.removeInputAction(
                        Cesium.ScreenSpaceEventType.LEFT_CLICK
                    ); //移除事件
                    viewer.screenSpaceEventHandler.removeInputAction(
                        Cesium.ScreenSpaceEventType.MOUSE_MOVE
                    ); //移除事件
                }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
            },
            movingEvt() {},
            // 添加点
            createPoint(position, float) {
                let point = new Cesium.Entity({
                    id: float ? "_floatPoint" : undefined, //undefined默认自动生成
                    position: position,
                    point: {
                        show: true, //是否展示
                        pixelSize: 10, //点的大小
                        // heightReference:HeightReference.NONE,//相对高度
                        color: Cesium.Color.RED, //颜色
                        outlineColor: Cesium.Color.SKYBLUE, //边框颜色
                        outlineWidth: 3, //边框宽度
                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
                    }
                });
                window.viewer.entities.add(point);
                // console.log(billboard.id);
                return point;
            },
            //屏幕定位转笛卡尔定位
            initPosition(Cartesian2) {
                let ray =window.viewer.camera.getPickRay(Cartesian2);
                let earthPosition = window.viewer.scene.globe.pick(
                    ray,
                    window.viewer.scene
                );
                let cartographic = Cesium.Cartographic.fromCartesian(earthPosition);
                let pos = Cesium.Cartesian3.fromDegrees(
                    Cesium.Math.toDegrees(cartographic.longitude),
                    Cesium.Math.toDegrees(cartographic.latitude),
                    cartographic.height
                );
                return pos;
            },
            //获取鼠标位置
            getMousePos(event) {
                let e = event || window.event;
                let scrollX =
                    document.documentElement.scrollLeft || document.body.scrollLeft;
                let scrollY =
                    document.documentElement.scrollTop || document.body.scrollTop;
                let x = e.pageX || e.clientX + scrollX;
                let y = e.pageY || e.clientY + scrollY;
                //alert('x: ' + x + '\ny: ' + y);
                // return { 'x': x, 'y': y };
                let canvas = viewer.canvas;
                let rect = canvas.getBoundingClientRect();
                x -= rect.left;
                y -= rect.top;
                console.log(x, y); // (x, y) 就是鼠标在 canvas 单击时的坐标
                return new Cesium.Cartesian2(x, y);
            }
        },
        //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
        beforeCreate() {
        },

        //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
        created() {

        },
        //生命周期 - 挂载之前",html模板未渲染
        beforeMount() {

        },

        //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
        mounted() {

        },

        //生命周期 - 更新之前",数据模型已更新,html模板未更新
        beforeUpdate() {

        },
        //生命周期 - 更新之后",数据模型已更新,html模板已更新
        updated() {

        },
        //生命周期 - 销毁之前",
        beforeDestroy() {

        },
        destroyed() {

        },
        //生命周期 - 销毁完成",
        //如果页面有keep-alive缓存功能，这个函数会触发",
        activated() {

        },
    }

</script>

<style scoped>
    .PlotPoints{
        position: relative;
    }
    .PlotPoints .btn{
        position: absolute;
        z-index: 1500;
        left: 10px;
        top: 5px;
    }
    .twipsy {
        position: absolute;
        z-index: 2000;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 5px 20px;
        display: none;
    }
</style>

